<!--
 * @Description: 任务状态
 -->
<template>
  <div>
    <div class="listArea">
      <div v-for="taskItem in taskList" :key="taskItem.id" class="taskItem">
        <div class="name">{{taskItem.taskName}}</div>
        <div class="company">{{taskItem.company.companyName}}</div>
        <div>{{taskItem.createTime | moment('YYYY/MM/DD HH:mm:ss')}}</div>
        <div>¥ {{taskItem.taskMoney}}</div>
        <div>{{taskItem.createTime | delayDay | moment('YYYY/MM/DD HH:mm:ss')}}</div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: {
    'taskList': [Array]
  },
  data () {
    return {

    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.listArea{
  padding-bottom: 20px;
}
.taskItem{
  background: #ffffff;
  width: 95%;
  height: 120px;
  font-size: 14px;
  color: #101010;
  padding: 15px;
  margin: 10px auto 0;
  box-shadow: 0px 2px 3px #00000066;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 10px;
  grid-column-gap: 20px;
}
.name{
  grid-column-start: 1;
  grid-column-end: 3;
}
.company{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
